<template>
    <div class="weather">
        <el-divider content-position="left" border-style="dashed">天气</el-divider>
        <div class="weathertype">
            <div @click="WeatherClick(item)" class="type" v-for="item in WeatherType" :key="item.name">
                <img :src="item.icon" alt="" />
                {{ item.name }}
            </div>
        </div>
        <div class="slider__content">
            <div class="slider--strength">强度</div>
            <el-slider v-model="currentStrength" :disabled="strengthDisabled" :max="1" :min="0" :step="0.1" class="elSlider" @change="changeStrengthSlider" />
        </div>
        <el-divider content-position="left" border-style="dashed">时间</el-divider>
        <!-- 时间滑块 -->
        <div class="slider__content">
            <div class="slider--time">{{ sliderFormat(currentTime) }}</div>
            <el-slider v-model="currentTime" :max="86380" :min="1" :show-tooltip="false" class="elSlider" @change="changeTimeSilde" />
        </div>
        <!--  -->
        <div class="TimeType">
            <div class="type" @click="TimeTypeClick(item)" v-for="item in TimeType" :key="item.name">
                <img :src="item.icon" alt="" />
                {{ item.name }}
            </div>
        </div>

        <!--  -->
        <div class="open-dark">
            <div class="dark-item">
                <span>黑暗模式:</span>
                <el-switch v-model="isDark" @change="changeDarkMode" class="ml-2" style="--el-switch-on-color: #0c0c0c; --el-switch-off-color: #ccc" />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import Dayjs from 'dayjs'
import { useAirCityStore } from '@/stores/aircity'
import { onMounted, ref } from 'vue'
const AirCityStore: any = useAirCityStore()

//初始化天气
const weatherInit = () => {
    // 禁用雨雪效果;
    __g.weather.disableRainSnow()
    //设置为白天
    __g.weather.setDateTime(2022, 4, 2, 10, 0, false)
    //设置雾
    __g.weather.setFogParam(0, 0, 0, 1)
    __g.weather.setCloudDensity(0.4)
    __g.weather.setCloudHeight(15)
    __g.weather.setCloudThickness(2)
    //重置日照
    __g.weather.setSunIntensity(0.8)
    //重置环境光
    __g.weather.setAmbientLightIntensity(0.6)
}
const HuanjingId = ref()
const isDark = ref(false)
const currentTime = ref(43200)

const weatherType = ref('')
const currentStrength = ref(0)
const strengthDisabled = ref(true)
const changeStrengthSlider = async (val: number) => {
    const type = weatherType.value
    const params = await __g.weather.getParams()
    if (type == '多云') {
        __g.weather.setCloudDensity(val)
    } else if (type == '小雨' || type == '中雨' || type == '大雨' || type == '暴雨') {
        __g.weather.setRainParam(val, (params.rainsnowSpeed + val) * val, (params.raindropSize + val) * val)
    } else if (type == '小雪' || type == '中雪' || type == '大雪' || type == '暴雪') {
        __g.weather.setSnowParam(val, (params.rainsnowSpeed + val) * val, (params.snowflakeSize + val) * val)
    } else if (type == '雾' || type == '霾') {
        __g.weather.setFogParam(val, (params.fogGroundDensity + val) * val, (params.fogGroundHeight + val) * val, 1)
    }
}
//设置时间
const timefn = async (hour: any, minute: any) => {
    /* 解构出年月日 */
    const { year, month, day }: any = await __g.weather.getDateTime()
    //设置时间
    __g.weather.setDateTime(year, month, day, Number(hour), Number(minute), false)
}
const changeTimeSilde = (val: number) => {
    let result = (val / 60 / 60).toFixed(2).split('.')
    let hour = result[0]
    let minutes = (~~(Number('0.' + result[1]) * 60)).toString().padStart(2, '0')

    timefn(hour, minutes)

    return hour + ':' + minutes
}
//滑动条的执行函数
const sliderFormat = (val: number) => {
    let result = (val / 60 / 60).toFixed(2).split('.')
    let hour = result[0]
    let minutes = (~~(Number('0.' + result[1]) * 60)).toString().padStart(2, '0')

    return hour + ':' + minutes
}

const changeTime = async () => {
    let { hour, minute } = await __g.weather.getDateTime()
    let num = Number(hour) * 60 * 60 + Number(minute) * 60
    currentTime.value = num
}

const initTime = (): any => {
    let date_time = Dayjs().format('HH:mm').split(':')
    return Number(date_time[0]) * 60 * 60 + Number(date_time[1]) * 60
}
/**
 * 开启/关闭黑暗模式
 * @param val
 */
const changeDarkMode = (val: boolean) => {
    __g.weather.setDarkMode(val)
}

//天气类型
const WeatherType = ref([
    {
        name: '晴天',
        icon: require('./img/晴天.png')
    },
    {
        name: '多云',
        icon: require('./img/阴天.png')
    },
    {
        name: '小雨',
        icon: require('./img/小雨.png')
    },
    {
        name: '小雪',
        icon: require('./img/小雪.png')
    },
    {
        name: '晴转多云',
        icon: require('./img/晴转多云.png')
    },
    {
        name: '阴',
        icon: require('./img/阴天.png')
    },
    {
        name: '中雨',
        icon: require('./img/中雨.png')
    },
    {
        name: '中雪',
        icon: require('./img/中雪.png')
    },
    {
        name: '小雪转晴',
        icon: require('./img/小雪转晴.png')
    },
    {
        name: '小雨转晴',
        icon: require('./img/小雨转晴.png')
    },
    {
        name: '大雨',
        icon: require('./img/大雨.png')
    },
    {
        name: '大雪',
        icon: require('./img/大雪.png')
    },
    {
        name: '雾',
        icon: require('./img/雾.png')
    },
    {
        name: '霾',
        icon: require('./img/雾霾.png')
    },
    {
        name: '暴雨',
        icon: require('./img/暴雨.png')
    },
    {
        name: '暴雪',
        icon: require('./img/暴雪.png')
    }
])
//天气的点击事件
const WeatherClick = (val: any) => {
    weatherType.value = val.name
    switch (val.name) {
        case '晴天':
            strengthDisabled.value = true
            weatherInit()
            __g.weather.setCloudDensity(0.3)
            __g.weather.setCloudHeight(15)
            __g.weather.setCloudThickness(1)

            break
        case '多云':
            weatherInit()
            __g.weather.setCloudDensity(0.6)
            __g.weather.setCloudHeight(15)
            __g.weather.setCloudThickness(2)
            __g.weather.setFogParam(0, 0, 0, 1)
            __g.weather.setSunIntensity(0.06)
            strengthDisabled.value = false
            currentStrength.value = 0.6
            break

        case '小雨':
            //初始化
            weatherInit()
            //设置云层
            __g.weather.setCloudDensity(0.6)
            __g.weather.setCloudHeight(15)
            __g.weather.setCloudThickness(2)

            //设置完云层厚度后才能开启雨效
            __g.weather.setRainParam(0.1, 0.2, 0.06)
            strengthDisabled.value = false
            currentStrength.value = 0.1
            break
        case '中雨':
            //初始化
            weatherInit()
            //设置云层厚度
            __g.weather.setCloudDensity(0.6)
            __g.weather.setCloudHeight(15)
            __g.weather.setCloudThickness(2)

            //设置完云层厚度后才能开启雨效
            __g.weather.setRainParam(0.3, 0.35, 0.12)
            strengthDisabled.value = false
            currentStrength.value = 0.3
            break
        case '大雨':
            //初始化
            weatherInit()
            //设置云层厚度
            __g.weather.setCloudDensity(0.6)
            __g.weather.setCloudHeight(15)
            __g.weather.setCloudThickness(2)

            //设置完云层厚度后才能开启雨效
            __g.weather.setRainParam(0.5, 0.5, 0.3)
            strengthDisabled.value = false
            currentStrength.value = 0.5
            break
        case '暴雨':
            //初始化
            weatherInit()
            __g.weather.setCloudDensity(0.6)
            __g.weather.setCloudHeight(15)
            __g.weather.setCloudThickness(2)

            //设置完云层厚度后才能开启雨效
            __g.weather.setRainParam(0.7, 0.65, 0.45)
            strengthDisabled.value = false
            currentStrength.value = 0.7
            break

        case '小雪':
            //初始化
            weatherInit()

            //设置完云层厚度后才能开启雪效
            __g.weather.setSnowParam(0.15, 0.05, 0.5)
            strengthDisabled.value = false
            currentStrength.value = 0.15
            break
        case '中雪':
            //初始化
            weatherInit()
            __g.weather.setCloudDensity(0.6)
            __g.weather.setCloudHeight(15)
            __g.weather.setCloudThickness(2)

            //设置完云层厚度后才能开启雪效
            __g.weather.setSnowParam(0.3, 0.1, 0.75)
            strengthDisabled.value = false
            currentStrength.value = 0.3
            break
        case '大雪':
            //初始化
            weatherInit()

            //设置完云层厚度后才能开启雪效
            __g.weather.setSnowParam(0.5, 0.15, 1)
            strengthDisabled.value = false
            currentStrength.value = 0.5
            break
        case '暴雪':
            //初始化
            weatherInit()

            //设置完云层厚度后才能开启雪效
            __g.weather.setSnowParam(1, 0.2, 1.5)
            strengthDisabled.value = false
            currentStrength.value = 1
            break

        case '晴转多云':
            strengthDisabled.value = true
            //初始化
            weatherInit()
            //先设置日照光 (0-10)
            __g.weather.setSunIntensity(0.3)
            __g.weather.setSunIntensity(5)
            __g.weather.setCloudDensity(0.3)
            __g.weather.setCloudHeight(15)
            __g.weather.setCloudThickness(1)
            //__g.weather.setAmbientLightIntensity(6)
            //延迟1.5秒转多云设置云层厚度 后减小光照
            setTimeout(() => {
                //厚度
                __g.weather.setCloudThickness(3)
                //密度
                __g.weather.setCloudDensity(2)
                //高度
                __g.weather.setCloudHeight(10)
                //降低日照
                __g.weather.setSunIntensity(0.06)
            }, 5000)
            break
        case '阴':
            strengthDisabled.value = true
            //初始化
            weatherInit()
            //  设置云层密度
            __g.weather.setCloudDensity(0.65)
            __g.weather.setCloudHeight(15)
            __g.weather.setCloudThickness(5)
            //  云层高度单位：公里

            __g.weather.setSunIntensity(0.05)
            __g.weather.setAmbientLightIntensity(0.25)
            break

        case '小雨转晴':
            strengthDisabled.value = true
            //初始化
            weatherInit()
            //雨
            __g.weather.setRainParam(0.1, 0.2, 0.06)

            setTimeout(() => {
                __g.weather.disableRainSnow()
                __g.weather.setCloudDensity(0.3)
                __g.weather.setCloudHeight(15)
                __g.weather.setCloudThickness(1)
            }, 5000)

            break
        case '雾':
            //初始化
            weatherInit()
            //设置雾的参数
            __g.weather.setFogParam(0.1, 0.02, 0.4, 1)
            strengthDisabled.value = false
            currentStrength.value = 0.1
            break
        case '霾':
            //初始化
            weatherInit()
            //设置云层厚度
            __g.weather.setCloudDensity(0.65)
            //设置雾的参数
            __g.weather.setFogParam(0.1, 0.04, 0.5, 1)
            //设置日照强度
            __g.weather.setSunIntensity(0.065)
            strengthDisabled.value = false
            currentStrength.value = 0.1
            break
        case '小雪转晴':
            strengthDisabled.value = true
            //初始化
            weatherInit()
            __g.weather.setSnowParam(0.15, 0.05, 0.5)
            setTimeout(() => {
                __g.weather.disableRainSnow()
                __g.weather.setCloudDensity(0.3)
                __g.weather.setCloudHeight(15)
                __g.weather.setCloudThickness(1)
            }, 5000)

            break

        default:
            strengthDisabled.value = true
            break
    }
}
//时间的类型
const TimeType = ref([
    {
        name: '早晨',
        icon: require('./img/早晨.png')
    },
    {
        name: '中午',
        icon: require('./img/中午.png')
    },
    {
        name: '傍晚',
        icon: require('./img/傍晚.png')
    },
    {
        name: '夜晚',
        icon: require('./img/夜晚.png')
    }
])
//时间的点击事件
const TimeTypeClick = (val: any) => {
    switch (val.name) {
        case '早晨':
            weatherInit()
            __g.weather.setDateTime(2022, 4, 2, 8, 0, false)
            changeTime()
            break
        case '中午':
            weatherInit()
            __g.weather.setDateTime(2022, 4, 2, 12, 30, false)
            changeTime()
            break
        case '傍晚':
            weatherInit()
            __g.weather.setDateTime(2022, 4, 2, 17, 30, false)
            changeTime()
            break
        case '夜晚':
            weatherInit()
            __g.weather.setDateTime(2022, 4, 2, 20, 30, false)
            changeTime()
            break
        default:
            break
    }
}
onMounted(async () => {
    AirCityStore.$state.TreeInfo.forEach((item: any) => {
        if (item.name === '环境') {
            HuanjingId.value = item.iD
        }
    })
})
</script>
<style lang="scss" scoped>
.weather {
    position: absolute;
    @include Width(300);
    @include hHeight(650);
    @include Top(130);
    @include Right(200);
    @include Padding(10, 10, 10, 10);
    border-radius: 2%;
    margin: auto;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 10;
    background: rgb(28, 39, 52);

    .tip {
        @include FontSize(12);

        .colsehuanjing {
            @include Padding(3.5, 2, 5, 2);

            cursor: pointer;

            &:hover {
                color: aqua;
            }
        }

        // color: aqua;
    }

    .weathertype {
        width: 100%;
        @include hHeight(300);
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        @include FontSize(14);
        //white-space:nowrap
        text-align: center;
        word-break: keep-all;
        white-space: nowrap;

        .type {
            //@include Width(50);
            width: 24%;
            @include hHeight(50);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            @include Padding(10, 15, 10, 15);

            cursor: pointer;

            img {
                // display: flex;

                @include MarginBottom(7);
                @include Width(20);
            }

            &:hover {
                background: rgba(0, 0, 0, 0.24);
            }
        }

        /*  .type img{
            @include Width(26);
            @include hHeight(26)
        } */
    }

    .TimeType {
        width: 100%;
        @include hHeight(80);
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        @include FontSize(14);
        //white-space:nowrap
        text-align: center;
        word-break: keep-all;
        white-space: nowrap;

        .type {
            //@include Width(50);
            width: 24%;
            @include hHeight(50);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            @include Padding(10, 15, 10, 15);

            cursor: pointer;

            img {
                // display: flex;

                @include MarginBottom(7);
                @include Width(20);
            }

            &:hover {
                background: rgba(0, 0, 0, 0.24);
            }
        }

        /*  .type img{
            @include Width(26);
            @include hHeight(26)
        } */
    }

    .slider__content {
        display: flex;
        align-items: center;
        @include Padding(0, 25, 0, 25);
        .slider--strength {
            @include Width(60);
        }
        .slider--time {
            color: #fff;
            @include Width(40);
            @include FontSize(14);
        }

        .elSlider {
            @include Width(300);
            @include MarginLeft(10);
            border-radius: 50%;

            /deep/ .el-slider__bar {
                // background-color: rgba($color: rgb(102, 221, 255), $alpha: 0.6);
                // background: linear-gradient(
                //   to right,
                //   rgba(102, 221, 255, 0.3),
                //   rgba(102, 221, 255, 0.5),
                //   rgba(102, 221, 255, 1)
                // );
                animation: liuguang 2s infinite linear;
            }

            /deep/ .el-slider__runway {
                background-color: transparent;
            }

            /deep/ .el-slider__button {
                @include Width(15);
                @include wHeight(15);
                @include MarginLeft(8);
                border-color: rgb(102, 221, 255);
                background: radial-gradient(rgba(102, 221, 255, 0.9), rgba(0, 0, 0, 0.8));
            }
        }
    }

    .open-dark {
        margin-top: 16px;
        display: flex;
        justify-content: space-between;

        .dark-item {
            display: flex;
            align-items: center;

            span {
                margin-right: 10px;
            }
        }
    }
}
/deep/.el-divider__text {
    background: #1c2734;
    color: #fff;
}
</style>
